<template>
      <!-- 新增 DOCX 预览弹窗 -->
 <div>
  <el-dialog 
      v-model="previewVisible" 
      title="文档预览"  
      @close="handlePreviewClose"
      width="850px"
      class="docx-preview-dialog"
      :destroy-on-close="true"
    >
      <div class="docx-preview-content">
        <vue-office-docx 
          ref="docxPreview" 
          :src="previewUrl" 
          :height="600" 
          :is-view="true"
          @ready="handlePreviewReady"
        />
      </div>
    </el-dialog>
 </div>
</template>
<script setup>  
import VueOfficeDocx from '@vue-office/docx'
import { ref, defineExpose } from 'vue'
const previewVisible = ref(false);
const previewUrl = ref("");
const docxPreviewRef = ref(null); // 组件引用
// 处理预览事件
// 暴露open方法，父组件可通过ref调用
function open(file) {
  previewUrl.value = `${import.meta.env.VITE_APP_BASE_API}${file}`
  previewVisible.value = true
}
defineExpose({ open })
const handlePreviewClose = () => {
  previewVisible.value = false;
  if (docxPreviewRef.value) {
    docxPreviewRef.value.destroy(); // 销毁组件实例
  }
};

</script>
<style scoped>
.docx-preview-dialog >>> .el-dialog {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.docx-preview-dialog >>> .el-dialog__body {
  overflow-y: auto;
  flex: 1 1 auto;
  max-height: 70vh;
}
.docx-preview-content {
  padding: 0 !important;
  margin: 0 !important;
}
</style>

